import React, { useContext } from 'react';
import { store } from "../store";
import ReactEcharts from "echarts-for-react";
import 'echarts/map/js/china';

const area=['Western Europe','Sub-Saharan Africa','Southern Asia','Southeastern Asia','North America','Middle East and Northern Africa','Latin America and Caribbean','Eastern Asia','Central and Eastern Europe','Australia and New Zealand'];

function Overview() {
    const {state, dispatch} = useContext(store);
    if(state.is_pie===1){
        let num={};
        let parm=new Array();
        let t=state.year;
        if(t==2017 || t==2018)t=t-2;
        else if(t==2019)t=2020;
        for(let i=0;i<50;++i)
            if(num[state.data[t-2015][i].Region]==null)num[state.data[t-2015][i].Region]=1;
            else num[state.data[t-2015][i].Region]++;
        for(let i=0;i<area.length;++i)parm.push({name:area[i],value:num[area[i]]});
        const getPie=()=>{
            return {
                xAxis: {
                    show:false
                },
                yAxis: {
                    show:false
                },
                series:{
                    data:parm,
                    type:'pie',
                }
            }
        }
        console.log(parm)
        return <div>
            <ReactEcharts option={getPie()} />
        </div>
    }
    else if(state.compare===1){
        let ori=2020-2015;
        let cur=2021-2015;
        let sub=new Array();
        // for(let item=0;item<state.data[ori].length;++item){
            // for(let com=0;com<state.data[cur].length;++com){
        for(let item=0;item<100;++item){
            for(let com=0;com<100;++com){
                if(state.data[ori][item].Country===state.data[cur][com].Country){
                    sub.push({
                        Country:state.data[ori][item].Country,
                        value:parseInt(state.data[ori][item].Rank)-parseInt(state.data[cur][com].Rank)
                    })
                }
            }
        }
        sub.sort((a,b)=>{
            return b.value-a.value;
        });
        let country=new Array();
        let value=new Array();
        for(let i=0;i<=10;++i){
            country.push(sub[i].Country);
            value.push(sub[i].value);
        }
        const getOption = () => {
            return {
                tooltip:{
                    show:true
                },
                xAxis: {
                    show:true,
                    type: 'category',
                    data: country
                },
                yAxis: {
                    show:true,
                    type: 'value'
                },
                series: [
                {
                    data: value,
                    type: 'bar',
                    showBackground: true,
                    color:'rgba(240,134,185,1.0)',
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                },
            ]
            };
        };
        return <div>
            <ReactEcharts option={getOption()} />
        </div>
    }
    else if (state.is_bar===1){ 
        let country=new Array();
        let score=new Array();
        if(state.count!=4 && state.is_pie===0)for(let i=0;i<state.count;++i){
            country[i]=state.data[state.year-2015][i].Country;
            score[i]=state.data[state.year-2015][i].Score;
        }
        const getOption = () => {
            return {
                tooltip:{
                    show:true
                },
                xAxis: {
                    show:true,
                    type: 'category',
                    data: country
                },
                yAxis: {
                    show:true,
                    type: 'value'
                },
                series: [
                {
                    data: score,
                    type: 'bar',
                    showBackground: true,
                    color:'rgba(100,200,200,1.0)',
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
            };
        };
        return <div>
            <ReactEcharts option={getOption()} />
        </div>
    }
}

export default Overview;
